<template>
    <div id="en">
        姓：<input type="text" v-model="firstName"> +
        名：<input type="text" v-model="lastName"> =
        <span>{{ fullName }}</span><br><br>

        <button @click="changeName">改名卡</button>
    </div>

</template>

<script>
    export default {
        name: "7-v-computed计算属性",
        data() {
            return {
                // 现有的数据
                firstName: '刘',
                lastName: '备',
            }
        },
        methods: {
            changeName () {
                this.fullName = '黄忠'
            }
        },
        computed: {
            // 简写 → 获取，没有配置设置的逻辑
            // fullName () {
            //   return this.firstName + this.lastName
            // }

            // 完整写法 → 获取 + 设置
            fullName: {
                // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
                //     会将返回值作为，求值的结果
                get () {
                    return this.firstName + this.lastName
                },
                // (2) 当fullName计算属性，被修改赋值时，执行set
                //     修改的值，传递给set方法的形参
                set (value) {
                    console.log("ddddddddddddddd="+value)
                    // console.log(value.slice(0, 1))
                    // console.log(value.slice(1))
                    this.firstName = value.slice(0, 1)
                    this.lastName = value.slice(1)
                }
            }
        }
    }
</script>

<style scoped>

</style>
